<template>
    <div class="com_box flexbox flexcolumn height_100" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <TaskDetails ref="del_ref" />
        <div class="sch_head flexbox flexcenter flexbetween">
            <div class="flexbox flexcenter">
                <div class="sch_tab" @click="switchTab('/tiktok_copy')">广告复制</div>
                <div class="sch_tab active">任务列表</div>
            </div>
        </div>
        <div class="flex over_box table_box">
            <el-table :data="tableData" class="com_table" ref="straRef" height="700px">
                <!-- <el-table-column type="selection" width="55" align="center" :reserve-selection="true">
                    </el-table-column> -->
                <el-table-column prop="id" label="任务ID" width="100">
                </el-table-column>
                <el-table-column prop="name" label="任务名称" min-width="170"></el-table-column>
                <el-table-column prop="name" label="广告账户" width="110">
                    <template slot-scope="scope">
                        <div>{{scope.row.advertiser.length}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="campaign_num" label="广告系列" width="140">
                    <template slot-scope="scope">
                        <el-tooltip content="推广系列数量" placement="top">
                            <div slot="content">
                                <div class="status_height">创建成功：<span class="text_green font_14">{{scope.row.campaign_success}}</span></div>
                                <div class="status_height">创建失败：<span class="text_red font_14">{{scope.row.campaign_error}}</span></div>
                                <div class="status_height">系列总数：<span class="color_03 font_14">{{scope.row.campaign_num}}</span></div>
                            </div>
                            <div class="flexbox flexcenter status_type_num">
                                <span class="status_line color_03">{{scope.row.campaign_num}}</span>
                                <span class="status_line text_green">{{scope.row.campaign_success}}</span>
                                <span class="status_line text_red">{{scope.row.campaign_error}}</span>
                            </div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="adgroup_num" label="广告组" width="140">
                    <template slot-scope="scope">
                        <el-tooltip content="广告组数量" placement="top">
                            <div slot="content">
                                <div class="status_height">创建成功：<span class="text_green font_14">{{scope.row.adgroup_success}}</span></div>
                                <div class="status_height">创建失败：<span class="text_red font_14">{{scope.row.adgroup_error}}</span></div>
                                <div class="status_height">广告组总数：<span class="color_03 font_14">{{scope.row.adgroup_num}}</span></div>
                            </div>
                            <div class="flexbox flexcenter status_type_num">
                                <span class="status_line color_03">{{scope.row.adgroup_num}}</span>
                                <span class="status_line text_green">{{scope.row.adgroup_success}}</span>
                                <span class="status_line text_red">{{scope.row.adgroup_error}}</span>
                            </div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="广告" width="140">
                    <template slot-scope="scope">
                        <el-tooltip content="广告" placement="top">
                            <div slot="content">
                                <div class="status_height">创建成功：<span class="text_green font_14">{{scope.row.creatives_success}}</span></div>
                                <div class="status_height">创建失败：<span class="text_red font_14">{{scope.row.creatives_error}}</span></div>
                                <div class="status_height">广告总数：<span class="color_03 font_14">{{scope.row.creatives_num}}</span></div>
                            </div>
                            <div class="flexbox flexcenter status_type_num">
                                <span class="status_line color_03">{{scope.row.creatives_num}}</span>
                                <span class="status_line text_green">{{scope.row.creatives_success}}</span>
                                <span class="status_line text_red">{{scope.row.creatives_error}}</span>
                            </div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="任务进度" width="150">
                    <template slot-scope="scope">
                        <el-link type="info" v-if="scope.row.status==1" :underline="false">等待执行</el-link>
                        <!-- <el-link type="primary" v-else-if="scope.row.status==2" :underline="false">正在执行</el-link> -->
                        <el-progress :percentage="scope.row.process" v-else-if="scope.row.status==2"></el-progress>
                        <el-link type="success" v-else-if="scope.row.status==3" :underline="false">创建完成</el-link>
                        <el-link type="danger" v-else-if="scope.row.status==4" :underline="false">创建失败</el-link>
                        <!-- <el-progress :percentage="scope.row.process" v-else></el-progress> -->
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="创建时间" width="210">
                </el-table-column>
                <el-table-column prop="product_num" label="操作" width="160" align="center" fixed="right">
                    <template slot="header" slot-scope="scope">
                        操作
                    </template>
                    <template slot-scope="scope">
                        <el-button type="text" @click="toDetails(scope.row)">详情</el-button>
                        <el-button type="text" @click="deletTask(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page_box flexbox flexcenter">
            <el-pagination background layout="total, prev, pager, next" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import TaskDetails from "./TaskDetails";
export default {
    components: {
        TaskDetails,
    },
    name: "",
    data() {
        return {
            showrank: true,
            timer: null,
            queryInfo: {
                id: "",
                page: 1,
                name: "",
                limit: 20,
                date: [],
                types: 2,
            },
            loading: false,
            total: 1,
            tableData: [],
        };
    },
    created() {
        this.getDataList(1);
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
    methods: {
        //获取列表
        async getDataList(page) {
            clearInterval(this.timer);
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                this.$tiktokUrl + "launch/TiktokTask/task_list",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
                this.getSpeed(this.tableData);
            }
        },

        // 获取进度
        async getProcess(list) {
            for (let i in list) {
                if (list[i].status == 2) {
                    const { data: res } = await this.$http.post(
                        this.$tiktokUrl + "launch/TiktokTask/get_speed",
                        {
                            id: list[i].id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        console.log(res);
                        if (res.data.speed) {
                            list[i].process = Math.floor(
                                Number(res.data.speed) * 100
                            );
                            this.$set(this.tableData, i, list[i]);
                            if (res.data.speed == "1.00") {
                                this.getDataList(this.queryInfo.page);
                            }
                        } else {
                            this.tableData[i].process = res.data.speed;
                        }
                    }
                }
            }
        },

        getSpeed(list) {
            let that = this;
            that.timer = window.setInterval(function () {
                let is_start =
                    list.filter((item) => {
                        return item.status == 2;
                    }).length > 0;
                if (is_start) {
                    that.getProcess(list);
                } else {
                    clearInterval(that.timer);
                }
            }, 2000);
        },

        // 删除
        deletTask(row) {
            this.$confirm("是否要删除该任务?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        this.$tiktokUrl + "launch/TiktokTask/task_del",
                        {
                            id: row.id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                        this.getDataList(1);
                    }
                })
                .catch(() => {});
        },

        // 跳转
        switchTab(path) {
            this.$router.push({
                path: path,
            });
        },

        // 重置
        resetFun() {
            this.queryInfo.id = "";
            this.queryInfo.name = "";
            this.queryInfo.date = [];
            this.getDataList(1);
        },

        // 详情
        toDetails(row) {
            this.$refs.del_ref.getData(row);
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.queryInfo.page = val;
            this.getDataList(val);
        },
    },
};
</script>


<style scoped>
.sch_tab {
    height: 71px;
    font-size: 16px;
    color: #616c85;
    line-height: 71px;
    margin-right: 20px;
    position: relative;
    cursor: pointer;
}
.sch_tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: #4475ff;
    transition: all 0.3s;
    transform: scaleX(0);
}
.sch_tab.active {
    font-weight: bold;
    color: #17233d;
}
.sch_tab.active::after {
    transform: scaleX(1);
}
.status_height {
    line-height: 26px;
}
.status_line {
    width: 34px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    position: relative;
}
.status_line::after {
    content: "";
    position: absolute;
    height: 8px;
    border-left: 1px solid #ebebeb;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.status_line:last-child::after {
    display: none;
}
.status_type_num {
    background-color: rgba(165, 177, 209, 0.08);
    border-radius: 2px;
}
.remark_hover .icon_btn {
    display: none;
}
.remark_hover:hover .icon_btn {
    display: flex;
    margin-left: 5px;
}
.role_icon {
    transform: rotate(-90deg);
}
</style>

<style>
</style>

